<template>
  <div v-enter-helper="getList" class="app-container">
    <el-card class="box-card">
        <!-- <el-button class="marginRB10" plain type="primary" @click="getExcel()"
        >导出Excle
        </el-button> -->
      <div class="flex justify-between">
        <div class="flex flex-wrap">
          
          <div>
            <span>IP地址：</span>
            <el-input
                v-model="listQuery.ip"
                class="marginRB10"
                clearable
                placeholder="请输入IP地址"
                style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>设备ID：</span>
            <el-input
                v-model="listQuery.device_id"
                class="marginRB10"
                clearable
                placeholder="请输入设备ID"
                style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>开始时间：</span>
            <el-date-picker v-model="listQuery.start_time" class="marginRB10" placeholder="开始时间"
                            type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <div>
            <span>结束时间：</span>
            <el-date-picker v-model="listQuery.end_time" class="marginRB10" placeholder="结束时间"
                            type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="searchSubmit"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          row-key="id"
          style="margin-bottom: 20px;width: 100%"
        >
          <el-table-column label="设备号" prop="device_id"></el-table-column>
          <el-table-column label="当日充值金额(rmb)" prop="total_price"></el-table-column>
          <el-table-column label="最近充值金额" prop="later_price"></el-table-column>
          <el-table-column label="最近充值结束时间" prop="later_time"></el-table-column>
          <el-table-column label="设备" prop="client_type"></el-table-column>
          <el-table-column label="设备名称" prop="device_name"></el-table-column>
          <el-table-column label="IP地址" prop="ip"></el-table-column>
          <el-table-column label="封禁状态" prop="state">
            <template slot-scope="{row}">
              <el-tag v-if="row.state === 1" type="success" size="normal"  effect="dark">正常</el-tag>
              <el-tag v-else type="danger" size="normal"  effect="dark">封禁中</el-tag>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="{row}">
              <el-button v-if="row.state === 1" type="warning" @click.native="rowBan(row)" plain>封设备</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- ban弹框 -->
    <el-dialog
      title="请输入封禁原因"
      :visible.sync="banDialogVisible"
      @close="handleDialogCloseBan('banReasonForm')"
      width="30%"
    >
      <el-form :model="banReasonForm" ref="banReasonForm" class="demo-ruleForm">
        <el-form-item
          label=""
          prop="reason"
          :rules="[{ required: true, message: '封禁理由不能为空' }]"
        >
          <el-input type="text" v-model="banReasonForm.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="banDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmBan('banReasonForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看详情 -->
    <el-drawer
      title="查看详情"
      :visible.sync="drawer">
      <div class="drawerBox">

        <h3>充值记录：</h3>
        <el-table :data="rechargeList" border stripe height="350">
          <el-table-column label="充值时间" prop="add_time"></el-table-column>
          <el-table-column label="充值金额(rmb)" prop="gold"></el-table-column>
        </el-table>
        
        <h3>送礼 记录：</h3>
        <el-table :data="giveGiftsRecordsList" border stripe height="350">
          <el-table-column label="送礼时间" prop="add_time"></el-table-column>
          <el-table-column label="赠出礼物价值(rmb)" prop="total_price"></el-table-column>
          <el-table-column label="收礼用户" prop="user_given.nickname"></el-table-column>
        </el-table>
      </div>

      <div class="footer">
        <el-button @click="drawer = false">返 回</el-button>
        <el-button type="primary" @click="setPage">下一页</el-button>
      </div>
    </el-drawer>

  </div>
  
</template>

<script>
import {riskDeviceList} from '@/api/order/riskManagement'
import {
  postBanDevice,
} from "@/api/member/device";
import {
  userWhite,
} from '@/api/member/whiteList'
import { adminRechargeList } from '@/api/member/adminRecharge'

export default {
  data() {
    return {
      giveGiftsRecordsList: [],
      rechargeList: [],
      drawer: false,
      confirmBtn: false,
      deleteDialogVisible: false,
      checkForm: {
        type: undefined
      },
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: '',
      remarkVisible: false,
      remarkFormRules: {
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      remarkForm: {
        remark: undefined
      },
      row_id: undefined,
      listLoading: true,
      total: 0,
      date: null,
      listQuery: {
        page: 1,
        per_page: 10,
        user_code: undefined,
        nick_name: undefined,
        mobile: undefined,
        start_time: undefined,
        end_time: undefined,
        user_id: undefined,
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        remark: undefined
      },
      rules: {
        remark: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      },
      banDialogVisible: false,
      banReasonForm: {
        reason: ""
      },
      page: 1,
      user_code: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchSubmit() {
      this.listQuery.page = 1
      this.getList()
    },
    // 点击重置
    resetSubmit() {
      this.listQuery = {
        page: 1,
        per_page: 10,
      }
      this.getList()
    },
    rowBan(row) {
      this.row_id = row.device_no
      this.banDialogVisible = true
    },
    getList() {
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
      }
      riskDeviceList(this.listQuery).then(response => {
        this.menuList = response.data.data
        this.total = response.data.total
        this.confirmBtn = false
      })
    },
    getExcel() {
      getExcel(this.listQuery).then(response => {
        location.href = response.data.download_url
      })
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handlePassAll(type) {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'warning'
        })
        return
      } else {
        let ids = ''
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`
        }
        ids = ids.substring(0, ids.length - 1)
        this.dataIds = { ids: ids }
      }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    // 拒绝
    handleRefuse(row, type) {
      this.dataIds = { ids: `${row.id}` }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    handleRefuseAll(type) {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'warning'
        })
        return
      } else {
        let ids = ''
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`
        }
        ids = ids.substring(0, ids.length - 1)
        this.dataIds = { ids: ids }
      }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    resetForm() {
      this.form = {
        id: undefined,
        remark: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate() // 清除整个表单的校验
      }
    },
    handleDialogCloseBan(formName) {
      this.banReasonForm.reason = "";
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate(); // 清除整个表单的校验
        this.$refs[formName].resetFields(); //重置表单
      }
    },
    // 确认封禁
    confirmBan(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let obj = {
            state: 0,
            remark: this.banReasonForm.reason
          };
          postBanDevice(this.row_id, obj).then(response => {
            if (response.code === 200) {
              this.getList();
              this.banDialogVisible = false;
              this.$notify({
                type: "success",
                message: "操作成功",
              });
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    handleWhite(row) {
      this.$confirm('是否确认将用户加入白名单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {

        userWhite({
          user_code: row.user_code
        }).then(res => {
          if(res.code === 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
        })
      }).catch(() => {
          this.$message({
              type: 'info',
              message: '已取消'
          });
      });
    },
    handleChecked(row) {
      this.drawer = true
      this.user_code = row.user_code
      this.page = 1
      this.getRechargeList()
      this.getlistData()
    },
    setPage() {
      this.page = this.page + 1
      this.getRechargeList()
      this.getlistData()
    },
    getRechargeList() {
      adminRechargeList({
        page: this.page,
        perPage: 10,
      }).then(response => {
        this.rechargeList = response.data.list
        this.page = response.data.meta.page
      })
    },
    getlistData() {
      riskGiftList({
        page: this.page,
        perPage: 10,
        user_code: this.user_id
      }).then(({ data: { data } }) => {
        this.giveGiftsRecordsList = data;
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .drawerBox {
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;

    .tableBox {
      height: 300px;
      overflow: auto;
    }
  }
  .footer {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      widows: 90px;
    }
  }
</style>